<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      text-align: center;
    }

    li {
      list-style: none;
      margin-bottom: 20px;
    }

    #list {
      width: 450px;
      height: 300px;
      margin: 30px auto;
      text-align: center;
      padding: 20px;
      border: 3px solid skyblue;
    }
  </style>
</head>

<body>
  <div id="list">
    <ul class="list-group">
      <li>书名：?,一本要10元</li>
      <li>书名：?,一本要10元</li>
      <li>书名：?,一本要10元</li>
      <li>书名：?,一本要10元</li>
    </ul>
  </div>
  <div>
    <button disabled="false" id="prev">上一页</button>
    <button id="next">下一页</button>
  </div>
  <p id="pagination">共?页，当前?页</p>
</body>
<script>
  // 课外书列表
  const bookList = [{
    "name": "带你从入门到实战全面掌握 uni-app",
    "price": 8900
  },
  {
    "name": "初中级前端工程师面试宝典",
    "price": 4900
  },
  {
    "name": "微信公众号开发入门",
    "price": 3900
  },
  {
    "name": "从零入门 React 通关指北",
    "price": 8900
  },
  {
    "name": "Flask 框架基础",
    "price": 9800
  },
  {
    "name": "JavaScript 从零构建音乐播放器",
    "price": 8900
  },
  {
    "name": "微信小程序开发入门",
    "price": 1490
  },
  {
    "name": "SpringBoot+Thymeleaf 开发 BBS 论坛",
    "price": 13900
  },
  {
    "name": "Vue.js 3 + Node.js 实现线上聊天室",
    "price": 8800
  },
  {
    "name": "Express.js 实现前后端分离的博客系统",
    "price": 8900
  },
  {
    "name": "经典项目：前后端分离网盘系统实战",
    "price": 8900
  },
  {
    "name": "21 个实验带你快速开发 Django 博客系统",
    "price": 1000
  },
  {
    "name": "React Hook 打造精美在线记账本",
    "price": 8900
  },
  {
    "name": '红楼梦',
    "price": 5900
  },
  {
    "name": "Three.js 在网页中创建 3D 动画",
    "price": 6400
  },
  {
    "name": "Web 前端高级开发技术",
    "price": 16900
  }
  ]
  let pageNum = 1; // 当前页数，默认为1
  const limit = 5; // 每页显示多少条数据
  const maxPage = Math.ceil(bookList.length / limit); // 最大页数
  const prev = document.getElementById("prev");
  const next = document.getElementById("next");

  // 初始化数据
  updataData(pageNum)

  // 更新页面数据（n当前页数）
  function updataData(n) {
    const listGroup = document.querySelector(".list-group")
    const pagination = document.getElementById("pagination")
    // 清空所有数据
    listGroup.innerHTML = ''
    // 循环遍历每一条数据
    for (let i = (n - 1) * limit; i < n * limit; i++) {
      const obj = bookList[i]
      // 如果有值才添加到元素中。
      // 防止在最后一页时，数据条数小于limit，获取的obj为undefind，出现报错。
      obj && (listGroup.innerHTML += `<li>书名：《${obj.name}》，价格为${obj.price}元</li>`)
    }
    // 更新当前页数和总页数
    pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`
  }

  // 更新按钮状态
  function updateBtnStatu(pageNum) {
    prev.disabled = pageNum <= 1 ? true : false
    next.disabled = pageNum >= maxPage ? true : false
  }

  // 点击上一页
  prev.onclick = function () {
    // 如果当前页是第一页，则不做任何操作
    if (pageNum === 1) return
    pageNum--
    updataData(pageNum)
    updateBtnStatu(pageNum)
  };

  // 点击下一页
  next.onclick = function () {
    // 如果当前页是最后一页了，则不做任何操作
    if (pageNum === maxPage) return
    pageNum++
    updataData(pageNum)
    updateBtnStatu(pageNum)
  };
</script>

</html>